<template>
  <div class="problem_type_analysis">
    <div class="chart_box">
      <div ref="myChart" class="chart_wrapper"></div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props: {
    problemTypeData: {
      type: Array
    },
  },
  name: 'ProblemTypeAnalysis',
  data() {
    return {
      isLoading: false, // 加载
      sortData: {}, // 排序对象
      wgroupName: [], // x轴
      // listData: [], // 原始数据
      myChart: {}, // 初始化画布
    }
  },
  computed: {
    // // 图表数据
    listData() {
      return this.$store.state.workshopSummary.problemTypeData || []
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.myChart)
    this.init()
  },
  methods: {
    // 初始化方法
    init() {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/workcentermessgeoverview',
        data: {
          beginCurrentWeekDate: this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
          endCurrentWeekDate: this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59')
        },
        module: 'workshopSummary',
        state: 'problemTypeData'
      }
      this.$store.dispatch('saveData', postData).then(res => {
        // 初始化图表数据
        this.echartsData()
        this.drawLine()
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 图表所需数据
    echartsData() {
      this.problemTypeName = [] // 问题类型
      this.count = []
      this.listData.fieldProblemTypeList.forEach(item => {
        this.problemTypeName.push(item.problemTypeName)
        this.count.push(item.count)
      })
    },
    // 设置图表legend上展示的值
    getValue(name) {
      let total = 0
      let currentV = 0
      this.listData.fieldProblemTypeList.map(item => {
        total += item.count
        if (name === item.problemTypeName) {
          currentV = item.count
        }
      })
      return {
        total: total,
        currentV: currentV
      }
    },
    // 绘制图表
    drawLine() {
      let xData = []
      let yData = []

      let arrData = [
        {problemTypeName: '设备异常', faultType: 'DeviceException', count: 0},
        {problemTypeName: '物料异常', faultType: 'MaterialException', count: 0},
        {problemTypeName: '技术异常', faultType: 'TechnologyException', count: 0},
        {problemTypeName: '设计异常', faultType: 'DesignException', count: 0},
        {problemTypeName: '质量异常', faultType: 'QualityException', count: 0},
        {problemTypeName: '工具异常', faultType: 'ToolException', count: 0},
        {problemTypeName: '其他异常', faultType: 'OthersException', count: 0}
      ]
      var arrObj = {
        ID_WPT_Device_Exception: {num: 0, value: 'DeviceException'},
        ID_WPT_Material_Exception: {num: 1, value: 'MaterialException'},
        ID_WPT_Technology_Exception: {num: 2, value: 'TechnologyException'},
        ID_WPT_Design_Exception: {num: 3, value: 'DesignException'},
        ID_WPT_Quanlity_Exception: {num: 4, value: 'QualityException'},
        ID_WPT_Tool_Exception: {num: 5, value: 'ToolException'},
        ID_WPT_Others_Exception: {num: 6, value: 'OthersException'}
      }
      this.listData.fieldProblemTypeList.map(item => {
        arrData[arrObj[item.faultType].num].count = item.count
      })

      let totalData = 0
      arrData.map(item => {
        xData.push(item.problemTypeName)
        yData.push({
          name: item.problemTypeName,
          value: item.count
        })
        totalData += item.count
      })

      const _this = this
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          padding: 10,
          textStyle: {
            fontSize: 12,
          },
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          // formatter: '{a} <br/>{b} : {c}({d}%)'
          formatter: function (param) {
            let avgNumber = isNaN((param.value / totalData * 100).toFixed(2)) ? 0 : (param.value / totalData * 100).toFixed(2)
            return param.seriesName + '<br>' +
              param.marker + param.name + ': ' + param.value +
              ' (' + avgNumber + '%' + ')' + '<br>';
          }
        },
        title: {
          text: '问题总数',
          subtext: totalData || '0',
          x: '29%',
          y: '40%',
          textAlign: 'center',
          textStyle: {
            color: '#7e8e9f',
            fontSize: 14,
            fontWeight: 'normal',
            align: 'center',
            width: 100
          },
          subtextStyle: {
            color: '#000',
            fontSize: 32,
            fontWeight: 'normal',
            align: 'center',
            width: 100
          }
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 15,
          right: '15%',
          top: '15%',
          bottom: 20,
          textStyle: {
            color: '#333'
          },
          data: xData,
          formatter: function (name) {
            var obj = _this.getValue(name)
            // let num = (obj.currentV / obj.total * 100).toFixed(2)
            // return name + '  |   ' + ((isNaN(num) ? 0 : num) + '%') + '      ' + obj.currentV
            return name + '         ' + obj.currentV
          },
        },
        series: [
          {
            name: '问题类型',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['30%', '50%'],
            data: yData,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  formatter: '{b} : {c} \n ({d}%)'
                },
                labelLine: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#3aa0ff', '#55d3d3', '#cded6e', '#fcdb56', '#f3647c', '#a878e9', '#6d6dd7']
      })
    },
  }
}
</script>

<style scoped lang="less">
  .problem_type_analysis {
    .chart_box {
      .chart_wrapper {
        width: 100%;
        height: 260px;
        box-sizing: border-box;
      }
    }
  }
</style>
